<template>
  <basic-container>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-setting"></i> 店铺管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <i class="el-icon-date"></i>
          {{title}}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <avue-form ref="form" v-model="form" :option="modifyOption">
      <template slot-scope="scope" slot="merchantId">
        <el-select
          filterable
          remote
          :remote-method="remoteMerchant"
          v-model="form.merchantId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in merchantList"
            :key="item.merchantId"
            :label="item.merchantName"
            :value="item.merchantId"
          />
        </el-select>
      </template>
      <template slot-scope="scope" slot="position">
        <div>
          <avue-map
            @input="changePosition"
            v-model="positionInfo"
            style="width:200px"
            :lnglat="initPosition"
          ></avue-map>
          <span>{{form.position ? ('已定位: ' + form.position) :'未定位'}}</span>
        </div>
      </template>
      <template slot-scope="scope" slot="photoList">
        <div>
          <div v-if="form.photoList" class="thumb" v-for="(item,index) in form.photoList">
            <img :src="item.picUrl" />
            <div class="hover_show">
              <i class="el-icon-delete" @click="handlePictureRemove(index, form.photoList)"></i>
            </div>
          </div>
          <div class="select_img" @click="sel_img('00', form.photoList, '1')">
            <i class="el-icon-plus"></i>
          </div>
        </div>
      </template>

      <template slot-scope="scope" slot="payCodeList">
        <div>
          <div v-if="form.payCodeList" class="thumb" v-for="(item,index) in form.payCodeList">
            <img :src="item.picUrl" />
            <div class="hover_show">
              <i class="el-icon-delete" @click="handlePictureRemove(index, form.payCodeList)"></i>
            </div>
          </div>
          <div class="select_img" @click="sel_img('00', form.payCodeList, '2')">
            <i class="el-icon-plus"></i>
          </div>
        </div>
      </template>

      <template slot-scope="scope" slot="qrcodeList">
        <div>
          <div v-if="form.qrcodeList" class="thumb" v-for="(item,index) in form.qrcodeList">
            <img :src="item.picUrl" />
            <div class="hover_show">
              <i class="el-icon-delete" @click="handlePictureRemove(index, form.qrcodeList)"></i>
            </div>
          </div>
          <div class="select_img" @click="sel_img('00', form.qrcodeList, '3')">
            <i class="el-icon-plus"></i>
          </div>
        </div>
      </template>

      <template slot-scope="scope" slot="shopLogoList">
        <div>
          <div v-if="form.shopLogoList" class="thumb" v-for="(item,index) in form.shopLogoList">
            <img :src="item.picUrl" />
            <div class="hover_show">
              <i class="el-icon-delete" @click="handlePictureRemove(index, form.shopLogoList)"></i>
            </div>
          </div>
          <div class="select_img" @click="sel_img('00', form.shopLogoList, '4')">
            <i class="el-icon-plus"></i>
          </div>
        </div>
      </template>
      <template slot-scope="scope" slot="menuForm">
        <el-button type="primary" @click="handleModify" :loading="btnLoading">提 交</el-button>
        <el-button @click="goBack">返 回</el-button>
      </template>
    </avue-form>
    <el-dialog title="选择图片" :visible.sync="selectImgFlag" style="text-align: left;">
      <sel-img-photogallery ref="selImg" :type="imgType" @select="onSelectImgs"></sel-img-photogallery>
    </el-dialog>
  </basic-container>
</template>

<script>
import { addObj, getObj, putObj } from "../../../api/manage/shop";
import { fetchList } from "../../../api/manage/merchant";
import { formOption } from "../../../const/crud/opc/form_option/shop_edit";
import { deepClone, goBack } from "../../../util/util";
import selImgPhotogallery from "../../../components/pds/common/sel_img_photogallery";

export default {
  data() {
    return {
      form: {
        photoList: [],
        payCodeList: [],
        qrcodeList: [],
        shopLogoList: []
      },
      modifyOption: {},
      shopId: "",
      modifyFlag: false,
      btnLoading: false,
      positionInfo: {},
      //初始化坐标
      initPosition: {
        P: 29.563761,
        R: 106.55046400000003
      },
      merchantList: [],
      selectImgFlag: false,
      selectImgType: "",
      imgType: ""
    };
  },
  components: {
    selImgPhotogallery
  },
  computed: {
    title() {
      return this.modifyFlag ? "修改" : "新增";
    }
  },
  created() {
    this.modifyOption = deepClone(formOption);
    this.shopId = this.$route.query.res.shopId;
    if (this.shopId) {
      this.modifyFlag = true;
      this.handleDetail();
    } else {
      this.form.status = "2";
      this.form.shopLevel = "2";
      this.remoteMerchant();
    }
  },
  methods: {
    handleDetail() {
      getObj(this.shopId)
        .then(response => {
          let info = response.data.data;
          this.merchantList.push({
            merchantId: info.merchantId,
            merchantName: info.merchantName
          });
          this.form = info;
        })
        .catch(() => {
          this.goBack();
        });
    },
    handleModify() {
      this.btnLoading = true;
      this.$refs.form.validate(res => {
        console.log(res);

        if (res) {
          let done = this.modifyFlag ? putObj : addObj;
          // 图片参数
          let params = {
            photoList:
              this.form.photoList.length === 0
                ? null
                : this.form.photoList.map(item => item.id),
            payCodeList:
              this.form.payCodeList.length === 0
                ? null
                : this.form.payCodeList.map(item => item.id),
            qrcodeList:
              this.form.qrcodeList.length === 0
                ? null
                : this.form.qrcodeList.map(item => item.id),
            shopLogoList:
              this.form.shopLogoList.length === 0
                ? null
                : this.form.shopLogoList.map(item => item.id)
          };
          let query = Object.assign({}, this.form, params);
          done(query)
            .then(res => {
              let msg = (this.modifyFlag ? "修改" : "新增") + "成功";
              this.$message.success(msg);
              this.goBack();
            })
            .catch(() => {
              this.btnLoading = false;
            });
        } else {
          this.$message.warning("必填项未填写");
          this.btnLoading = false;
        }
      });
    },
    changePosition(data) {
      this.form.address = data.formattedAddress;
      this.form.position = data.longitude + "," + data.latitude;
    },
    remoteMerchant(name = null) {
      let query = {
        merchantName: name
      };
      fetchList(query).then(response => {
        this.merchantList = response.data.data.records;
      });
    },
    // 删除el-upload的图片
    handlePictureRemove(index, imgArray) {
      imgArray.splice(index, 1);
    },
    sel_img(type, imgArray, selectType) {
      this.imgType = type;
      this.selectImgType = selectType;
      if (imgArray.length > 4) {
        return this.$message.warning("最多上传5张照片");
      }
      this.selectImgFlag = true;
    },
    onSelectImgs(imgArray) {
      let array;
      switch (this.selectImgType) {
        case "1":
          array = this.form.photoList;
          break;
        case "2":
          array = this.form.payCodeList;
          break;
        case "3":
          array = this.form.qrcodeList;
          break;
        case "4":
          array = this.form.shopLogoList;
          break;
        default:
          array = [];
          this.$message.warning("图片选择有误");
      }
      array.push(...imgArray);
      if (array.length > 5) {
        array.splice(4, array.length - 5);
        this.$message.warning("图片最多选择5张");
      }
      this.selectImgFlag = false;
    },
    goBack(time = 1000) {
      goBack(this, time);
    }
  }
};
</script>

<style scoped lang="scss">
.crumbs {
  margin: 20px 10px;
}

.thumb {
  width: 150px;
  height: 150px;
  position: relative;
  line-height: 146px;
  float: left;
  margin-right: 15px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #c0ccda;
}

.thumb img {
  width: 100%;
  height: 100%;
}

.thumb .hover_show {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: none;
  text-align: center;
}

.thumb:hover .hover_show {
  display: block;
}

.thumb .hover_show i {
  color: #fff;
  margin: 0 10px;
  cursor: pointer;
}

.select_img {
  width: 148px;
  height: 148px;
  line-height: 146px;
  border: 1px dashed #c0ccda;
  background-color: #fbfdff;
  font-size: 28px;
  color: #8c939d;
  cursor: pointer;
  border-radius: 6px;
  text-align: center;
  float: left;
}
</style>


